<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>电视柜</title>
	<link rel="stylesheet/less" type="text/css" href="dianshigui.less"></link>
</head>
<body>
	<div class="dianshigui1 ruleWC">

		<div class="guiziqu ruleWC">
			<div class="shang">
				<div class="diaogui1 rule txtArea gm" id="吊柜1"></div>
				<div class="diaogui2 rule txtArea gm" id="吊柜2"></div>
				<div class="diaogui3 rule txtArea gm" id="吊柜3"></div>
			</div>
			<div class="zhong ruleWC">
				<div class="qiangqu">
					<div class="qiang rule txtArea" id="墙"></div>
					<div class="chouti1 rule txtArea gm" id="抽屉1"></div>
				</div>
				<div class="zhanshiguiqu">
					<div class="leftzhanshiguiqu">
						<div class="zhanshigui1 rule txtArea" id="展柜1"></div>
						<div class="zhanshigui2 rule txtArea" id="展柜2"></div>
						<div class="zhanshigui3 rule txtArea" id="展柜3"></div>
					</div>
					<div class="rightzhanshiguiqu">
						<div class="zhanshigui4 rule txtArea" id="展柜4"></div>
						<div class="zhanshigui5 rule txtArea" id="展柜5"></div>
						<div class="zhanshigui6 rule txtArea" id="展柜6"></div>
						<div class="zhanshigui7 rule txtArea" id="展柜7"></div>
					</div>
				</div>
			</div>
			<div class="xia ruleWC">
				<div class="xiaguiqu">
					<div class="guizi1 rule txtArea gm" id="柜子1"></div>
					<div class="zhongxia">
						<div class="shangceng">
							<div class="tonggui rule txtArea" id="通柜"></div>
						</div>
						<div class="xiaceng">
							<div class="chouti2 rule txtArea gm" id="抽屉2"></div>
							<div class="chouti3 rule txtArea gm" id="抽屉3"></div>
							<div class="chouti4 rule txtArea gm" id="抽屉4"></div>
						</div>
					</div>
					<div class="guizi2 rule txtArea gm" id="柜子2"></div>
				</div>
				<div class="ditaiqu ruleWC"></div>
			</div>

		</div>
		<div class="kongtiaogui rule txtArea" id="空调区"></div>

		<div class="person"></div>

	</div>
	<div class="dianshigui2">
	</div>
	<div class="dianshigui3 ruleWC">
	</div>

	
	<div class="box">
		<div class="row" id="文字" connect="txt"></div>
		<div class="row" id="参考线" connect="ruleW|ruleH|ruleWCW|ruleWCH"></div>
		<div class="row" id="柜门" connect="guimen"></div>
		<div class="row" id="参照物" connect="person"></div>
		<div class="row" id="柜门开关" connect="柜门开关"></div>
	</div>
</body>
<script src="less.js"></script>
<script src="jquery.min.js"></script>
<script>
	setTimeout(() => {
		$(".gm").each((i,e) => {
			$(e).append(`<span class="guimen guimen${e.id}"></span>`)
			if("吊柜1"==e.id||"吊柜2"==e.id){
				$(e).append(`<span class="guimen guimen${e.id}2"></span>`)
			}
		});
		$(".txtArea").each((i,e) => {
			$(e).append(`<span class="txt">${e.id}</span>`)
		});
		$(".rule").each((i,e) => {
			var cn = e.className.split(" ")[0]
			$(e).append(`<div class="ruleW ${cn}Width"></div><div class="ruleH ${cn}Height"></div>`)
			$(`.${cn}Width`).html($(`.${cn}Width`).width())
			$(`.${cn}Height`).html($(`.${cn}Height`).height()).css(`line-height`,$(`.${cn}Height`).height()+"px")
		});
		$(".ruleWC").each((i,e) => {
			var cn = e.className.split(" ")[0]
			$(e).append(`<div class="ruleWCW ${cn}Width"></div><div class="ruleWCH ${cn}Height"></div>`)
			$(`.${cn}Width`).html($(e).outerWidth())
							.width($(e).outerWidth())
							.css("left",`-${$(e).css("borderLeftWidth")}` )
			$(`.${cn}Height`).html($(e).outerHeight())
							.height($(e).outerHeight())
							.css(`line-height`,$(e).outerHeight()+"px")
							.css("top",`-${$(e).css("borderTopWidth")}` )
		});
		$(".row").each((i,e) => {
			$(e).append(`<input type="checkbox" id="${$(e).attr("connect")}" /><span>${e.id}</span>`)
		});
		$("input[type=checkbox]").click((e) => {
			if(e.currentTarget.id=="柜门开关"){
				$(`.guimen`).toggleClass("transformNone")
			}else{
				e.currentTarget.id.split("|").forEach((ele) => {
					$(`.${ele}`).toggle()
				});
			}
		});
	}, 100);
</script>

</html>